<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        canvas {
            border: 1px solid #d3d3d3;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="500" height="420"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;

        // Helper function to draw text with subscript
        function drawTextWithSubscript(text, sub, x, y) {
            ctx.font = 'italic 20px Times New Roman';
            const textMetrics = ctx.measureText(text);
            ctx.fillText(text, x, y);
            ctx.font = 'italic 14px Times New Roman';
            ctx.fillText(sub, x + textMetrics.width -2, y + 4);
        }
        
        // Helper function to draw an arrow
        function drawArrow(x1, y1, x2, y2, isDashed = false) {
            if (isDashed) {
                ctx.setLineDash([4, 4]);
            }
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            
            // Arrowhead
            const headlen = 8;
            const angle = Math.atan2(y2 - y1, x2 - x1);
            ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
            
            ctx.stroke();
            if (isDashed) {
                ctx.setLineDash([]);
            }
        }

        // Component Coordinates
        const batt_x = 80;
        const batt_top_y = 100;
        const batt_bot_y = 350;

        const R1_x_center = 200;
        const R1_y = 60;
        const R1_width = 70;
        const R1_height = 25;

        const A_x = 320;
        const A_y = 120;

        const B_x = 320;
        const B_y = 340;

        const R2_x = 220;
        const R2_y_center = 230;
        const R2_width = 25;
        const R2_height = 70;

        const C_x = 320;
        const C_y_center = 230;
        const C_plate_width = 35;
        const C_gap = 8;

        const R3_x = 420;
        const R3_y_center = 260;
        const R3_width = 25;
        const R3_height = 70;
        
        const K_hinge_x = R3_x;
        const K_hinge_y = 170;
        const K_length = 40;
        const K_angle_rad = -Math.PI / 5;


        // --- Draw Wires ---
        ctx.beginPath();
        // Main loop
        ctx.moveTo(batt_x, batt_top_y);
        ctx.lineTo(batt_x, R1_y);
        ctx.lineTo(R1_x_center - R1_width / 2, R1_y);
        ctx.moveTo(R1_x_center + R1_width / 2, R1_y);
        ctx.lineTo(A_x, R1_y);
        ctx.lineTo(A_x, A_y);
        ctx.moveTo(B_x, B_y);
        ctx.lineTo(B_x, 370);
        ctx.lineTo(batt_x, 370);
        ctx.lineTo(batt_x, batt_bot_y);

        // Parallel branch connections
        ctx.moveTo(A_x, A_y);
        ctx.lineTo(R2_x, A_y);
        ctx.moveTo(R2_x, A_y);
        ctx.lineTo(R2_x, R2_y_center - R2_height / 2);
        ctx.moveTo(R2_x, R2_y_center + R2_height / 2);
        ctx.lineTo(R2_x, B_y);
        ctx.lineTo(B_x, B_y);
        
        ctx.moveTo(A_x, A_y);
        ctx.lineTo(C_x, C_y_center - C_gap / 2);
        ctx.moveTo(C_x, C_y_center + C_gap / 2);
        ctx.lineTo(B_x, B_y);

        ctx.moveTo(A_x, A_y);
        ctx.lineTo(R3_x, A_y);
        ctx.moveTo(R3_x, A_y);
        ctx.lineTo(R3_x, K_hinge_y - 20); // Wire to switch area
        ctx.moveTo(R3_x, K_hinge_y + 20); // Wire from switch area
        ctx.lineTo(R3_x, R3_y_center - R3_height/2);
        ctx.moveTo(R3_x, R3_y_center + R3_height / 2);
        ctx.lineTo(R3_x, B_y);
        ctx.lineTo(B_x, B_y);
        
        ctx.stroke();

        // --- Draw Components ---
        // Battery
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('ε', batt_x - 30, 230);
        ctx.beginPath();
        ctx.moveTo(batt_x - 20, batt_top_y);
        ctx.lineTo(batt_x + 20, batt_top_y);
        ctx.moveTo(batt_x - 10, batt_top_y + 8);
        ctx.lineTo(batt_x + 10, batt_top_y + 8);
        ctx.stroke();
        
        // Resistor R1
        ctx.clearRect(R1_x_center - R1_width / 2, R1_y - R1_height / 2, R1_width, R1_height);
        ctx.strokeRect(R1_x_center - R1_width / 2, R1_y - R1_height / 2, R1_width, R1_height);
        drawTextWithSubscript('R', '1', R1_x_center - 10, R1_y - 20);

        // Resistor R2
        ctx.clearRect(R2_x - R2_width / 2, R2_y_center - R2_height / 2, R2_width, R2_height);
        ctx.strokeRect(R2_x - R2_width / 2, R2_y_center - R2_height / 2, R2_width, R2_height);
        drawTextWithSubscript('R', '2', R2_x + 20, R2_y_center + 5);

        // Capacitor C
        ctx.clearRect(C_x - C_plate_width / 2, C_y_center - C_gap/2 - 2, C_plate_width, C_gap + 4);
        ctx.beginPath();
        ctx.moveTo(C_x - C_plate_width / 2, C_y_center - C_gap / 2);
        ctx.lineTo(C_x + C_plate_width / 2, C_y_center - C_gap / 2);
        ctx.moveTo(C_x - C_plate_width / 2, C_y_center + C_gap / 2);
        ctx.lineTo(C_x + C_plate_width / 2, C_y_center + C_gap / 2);
        ctx.stroke();
        ctx.font = 'italic 20px Times New Roman';
        ctx.fillText('C', C_x + 25, C_y_center + 5);
        
        // Resistor R3
        ctx.clearRect(R3_x - R3_width / 2, R3_y_center - R3_height / 2, R3_width, R3_height);
        ctx.strokeRect(R3_x - R3_width / 2, R3_y_center - R3_height / 2, R3_width, R3_height);
        drawTextWithSubscript('R', '3', R3_x + 20, R3_y_center + 5);

        // Switch K
        ctx.clearRect(K_hinge_x-5, K_hinge_y-20, 10, 40);
        ctx.beginPath();
        ctx.arc(K_hinge_x, K_hinge_y, 3, 0, 2 * Math.PI); // Hinge
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(K_hinge_x, K_hinge_y);
        ctx.lineTo(K_hinge_x + K_length * Math.cos(K_angle_rad), K_hinge_y + K_length * Math.sin(K_angle_rad));
        ctx.stroke();
        ctx.font = '20px Times New Roman';
        ctx.fillText('K', K_hinge_x + 25, K_hinge_y - 10);
        
        // Nodes A and B
        ctx.font = '20px Times New Roman';
        ctx.beginPath();
        ctx.arc(A_x, A_y, 3.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('A', A_x + 10, A_y);
        ctx.beginPath();
        ctx.arc(B_x, B_y, 3.5, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('B', B_x + 10, B_y + 15);
        
        // --- Draw Currents ---
        // I1
        drawArrow(R1_x_center + 20, R1_y + 20, R1_x_center - 20, R1_y + 20, true);
        drawTextWithSubscript('I', '1', R1_x_center - 10, R1_y + 45);
        
        // I2
        drawArrow(R2_x, A_y + 15, R2_x, A_y + 55, true);
        drawTextWithSubscript('I', '2', R2_x - 35, A_y + 45);

        // Ic
        drawArrow(C_x, A_y + 35, C_x, A_y + 75, true);
        drawTextWithSubscript('I', 'C', C_x - 35, A_y + 65);
        
        // I3
        drawArrow(R3_x, A_y + 15, R3_x, A_y + 55, true);
        drawTextWithSubscript('I', '3', R3_x - 35, A_y + 45);

    </script>
</body>
</html>